<template>
  <!--  导航栏
  van-nav-bar
    title:中间标题
    left-text: 左边文本内容
    right-text: 右边文本内容
    left-arrow: 左边小箭头
    @click-left :左边点击
    @click-right: 右边点击
    插槽
      slot='title/left/right'

 -->
  <div class="muInfo">
    <!-- 父传子
      在子组件标签上定义一个属性 title=‘值’
      然后在父组件内接受 props:['属性名']
     -->
    <hmNavBar title="我的资料" path="/home/my"></hmNavBar>
    <div class="content">
      <myCell title="头像" :value="userInfo.avatar" type="img"></myCell>
      <!-- // 个人简介和昵称公用一个页面 但是不知道点击进去的是那个
      // 所以点击事件里面需要代入参数 -->
      <myCell
        class="nickName"
        title="昵称"
        :value="userInfo.nickname"
        @click.native="goEditInfo('nickname')"
      ></myCell>
      <!-- 组件中使用原生的事件 事件后面需要加.native -->
      <myCell
        title="性别"
        :value="genderObj[userInfo.gender]"
        @click.native="showGender = true"
      ></myCell>
      <myCell
        title="地区"
        :value="area.city_list[userInfo.area]"
        @click.native="showArea = true"
      ></myCell>
      <myCell
        title="个人简介"
        :value="userInfo.intro"
        @click.native="goEditInfo('intro')"
      ></myCell>
      <van-button class="btn" color="#fff" block @click="exit"
        ><span class="red">退出登录</span></van-button
      >
    </div>
    <!-- 性别弹框 -->
    <!-- v-model 显示弹框状态
        position 弹框的显示位置
     -->
    <van-popup v-model="showGender" position="bottom">
      <!-- 选择器
        van-picker
        title:标题
        show-toolbar:显示工具
        columns:columns是数组数据
        defaut-index:默认选中项（数组数据的索引）
        @cancel:取消点击事件
        @confirm:确定点击事件（value 当前选中项的值,index 当前选中项的索引）
        @change:选择修改时触发
       -->
      <van-picker
        title="修改性别"
        show-toolbar
        :columns="Object.values(genderObj)"
        :defaut-index="userInfo.gender"
        @cancel="showGender = false"
        @confirm="genderConfirm"
      ></van-picker>
    </van-popup>
    <!-- 地区弹框 -->
    <van-popup v-model="showArea" position="bottom">
      <!-- 地区选择
        van-area
          title:标题
          area-list:省市区数据
          columns-num:3表示省市区数据 2表示省市 1表示省
          value:默认选中那个城市（对应城市的code）
          @cancel:取消点击事件
          @confirm:确定点击事件（value（选中哪一项的值），index（选中哪一项的索引））
       -->
      <van-area
        title="地区修改"
        :area-list="area"
        columns-num="2"
        :value="userInfo.area"
        @candel="showArea = false"
        @confirm="areaConfirm"
      ></van-area>
    </van-popup>
  </div>
</template>

<script>
// 使用组件
// 1 导入muCell
import myCell from './mycell.vue'
import { mapState } from 'vuex'
import { remoteToken } from '@/utils/token.js'
// 导入修改资料请求api
import { auEdit, auInfo } from '@/api/my.js'
// 导入城市级联文件
// 注意  这里的数据不能直接在html中使用 需要在data中接收一下 然后使用data中的接收的变量
import area from '@/assets/js/area.js'
export default {
  // 2 注册
  components: {
    myCell
  },
  data () {
    return {
      area: area,
      showGender: false, // 性别选择弹框显示状态
      showArea: false, // 地区弹框显示状态
      // 对象转换成数组方法
      // object.keys(对象) 将对象的key值转换为数组['0','1','2',]
      // object.values(对象) 将对象的value值转换为数组['保密','男','女',]
      // object.entries(对象) 将对象的key和value都转换为一个二维数组[['0','保密'],['1','男'],['2','女']]
      genderObj: {
        0: '保密',
        1: '男',
        2: '女'
      }
    }
  },
  methods: {
    exit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '您确定要退出吗？'
        })
        .then(() => {
          // 这里是确定退出要做的事情
          // 删除token 并且返回登录页 还要修改登录状态为false
          remoteToken('token')
          this.$store.commit('setIsLogin', false)
          this.$router.push('/login')
        })
        .catch(() => {
          alert('取消')
        })
    },
    // 性别选择确定
    genderConfirm (value, index) {
      console.log(value)
      console.log(index)
      // 关闭弹窗
      this.showGender = false
      // this.$toast.loading({
      //   duration: 0
      // })
      // auEdit({
      //   gender: index
      // }).then(res => {
      //   console.log(res)
      //   this.$toast.success('修改成功')
      //   // 更新vuex中的userInfo
      //   auInfo().then(res => {
      //     // console.log(res)
      //     // 将用户信息保存到vuex
      //     this.$store.commit('setUserInfo', res.data.data)
      //     // 修改用户登录状态
      //     this.$store.commit('setIsLogin', true)
      //   })
      // })
      this.editInfo({
        gender: index
      })
    },
    // 地区选择确定
    areaConfirm (value, index) {
      console.log(value)
      console.log(index)
      console.log(value[1].code)
      // 关闭弹框
      this.showArea = false
      // 调用接口更新地区
      // this.$toast.loading({
      //   duration: 0
      // })
      this.editInfo({
        area: value[1].code
      })
    },
    editInfo (obj) {
      this.$toast.loading({
        duration: 0
      })
      auEdit(obj).then(() => {
        this.$toast.success('修改成功')
        // // 更新vuex中的数据
        auInfo().then(res => {
          //   // 将用户信息保存到vuex
          //   this.$store.commit('setUserInfo', res.data.data)
          //   // 修改用户登录状态
          //   this.$store.commit('setIsLogin', true)
          // vuex中的信息更新可以在store/index.js里边直接更新 然后这里接口调用即可
          // 调用store/index中定义好的方法名
          this.$store.dispatch('refresUserInfo')
        })
      })
    },
    // 昵称修改跳转
    goEditInfo (str) {
      // 路由传值  传： path?参数名=值  收： this.$route.query.type
      this.$router.push('/home/editInfo?type=' + str)
    }
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.muInfo {
  // 这里如果使用百分比的高度 在InhoneX中会有小bug 最好的解决方法是利用生命周期钩子
  height: 100%;
  background-color: #f7f4f5;
  .content {
    padding: 18px @p15;
    .nickName {
      margin-top: 10px;
    }
    .btn {
      margin-top: 10px;
      .red {
        color: red;
      }
    }
  }
}
</style>
